<template>
	<view class="search">
		<hand title="搜索" :icon='true':iconBlack='true'></hand>
		<view class="container">
			<scroll-view scroll-y="true" >
				
				<!-- 搜索框 -->
				<view class="index-search" >
					<text class="iconfont icon-Magnifier" @click="heardleToSearch(searchWord)"></text>
					<input type="text" placeholder="搜索歌曲" v-model="searchWord"  @confirm="heardleToSearch(searchWord)"
					@input="headleToSuggest()" >
						<text v-show="searchType!==1" class="inconfont icon-caozuo-guanbi" @tap="headleToClose()"></text>
				</view>

	<block v-if="searchType==1">
					<view class="search-history">
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont icon-zu" @tap="headleToClear()"></text>
							
						</view>
						<view class="search-history-list">
							<view v-for="(item,index) in searchHistory" :key="index" @tap="handleToWord(item)">{{item}}</view>
						

						</view>
					</view>
				<!--  -->
				<view class="search-hot">
				<view class="search-hot-head">热搜榜</view>
				
				<view class="search-hot-item" v-for="(item,index) in searchHot" :key="index" @tap="handleToWord(item.searchWord)">
					<view class="search-hot-top">{{index+1}}</view>
					<view class="search-hot-word">
						<view>
							{{item.searchWord}}
							<image :src="item.iconUrl" mode="aspectFill"></image>
						</view>
						<view class=" text">{{item.content}}</view>
					</view>
					<text class="search-hot-count">{{item.score}}</text>
				</view>
				
			
				</view>	
				</block>
				<block v-else-if="searchType==2">
					<view class="search-result">
						<view class="search-result-item" v-for="(item,index) in searchList" :key="index" @tap=headleToDetail(item.id)>
							<view class="search-result-word">
								<view >{{item.name}}</view>
								<view >{{item.ar[0].name}}-{{item.al.name}}</view>
							
							</view>
							<text class="iconfont icon-bofang"></text>
						</view>
						
						
					</view>
				</block>
				<block v-else-if="searchType==3">
					<view class="search-suggets">
						<view class="search-suggets-head">
							搜索“{{searchWord}}”
						</view>
						<view class="search-suggets-item" v-for="(item,index) in searchSuggest" :key="index" @tap="handleToWord(item.keyword)">
							<text class="iconfont icon-Magnifier"> </text>{{item.keyword}}
						</view>
					</view>
					
				</block>
				</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css'
	import hand from "../../components/miuschead/miuschead.vue"
		import { apis } from "../../common/api.js"
	export default {
		data() {
			return {
				searchHot:[],
				searchWord:'',
				searchHistory:[],
				searchType:1,
				searchList:null,
				searchSuggest:[]
				
			}
		},
		onLoad() {
			apis.searchHot().then((res)=>{
				if (res[1].data.code==200) {
					this.searchHot=res[1].data.data
				
				}
			})
			uni.getStorage({
				key:'searchHistory',
				success:(res)=> {
					this.searchHistory=res.data
				}
			})
		
		},
		methods:{
			handleToWord(value){
				this.searchWord=value
				this.heardleToSearch(value)
			},
			heardleToSearch(value){
	this.searchHistory.unshift(value)
	this.searchHistory=[...new Set(this.searchHistory)]
	if(this.searchHistory.length>10){
		this.searchHistory.length=10
	}
	uni.setStorage({
		key:'searchHistory',
		data:this.searchHistory
	})
	this.getSearchList(value)
			},
			headleToClear(){
			uni.removeStorage({
				key:'searchHistory',
				success:(res)=> {
					this.searchHistory=[]
				}
			})
			},
			getSearchList(value){
				console.log(value);
				apis.searchWord(value).then((res)=>{
			
					
					if(res[1].data.code==200){
						
						this.searchList=res[1].data.result.songs;
	
						console.log(this.searchList);
					this.searchType=2
					}
				})
			},
			headleToClose(){
				this.searchWord=''
				this.searchType=1
			},
			headleToDetail(songId){
				uni.navigateTo({
					url:"/pages/detall/detall?songid="+songId
				})
			},
			headleToSuggest(){
			let value=this.searchWord
			console.log(value);
				if(!value){
					this.searchType=1
					return
				}
				apis.searchSuggest(value).then((res)=>{
					if(res[1].data.code==200){
					this.searchSuggest=res[1].data.result.allMatch
						this.searchType=3
				}
			
				})
				
				
			}
			
			
		},
		components:{
			hand
		}
		}
	
</script>

<style scoped>
	.index-search{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx  30rpx 30rpx 30rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
	}
	.index-search text{
		font-size: 26rpx;
		margin-right: 26rpx;
		margin-left: 26rpx;
	}
	.index-search input{
		font-size: 28rpx;
		flex: 1;
	}
	.search-history{margin: 0rpx 30rpx 50rpx ;  font-size: 26rpx;}
	.search-history-head{ display: flex; justify-content: space-between; margin-bottom: 36rpx;}
	.search-history-list{display: flex; flex-wrap: wrap; }
	.search-history-list view{padding: 16rpx 28rpx; border-radius: 40rpx; margin-right: 30rpx; margin-bottom: 30rpx; background-color: #f7f7f7;}
	.search-hot{margin: 0 30rpx; font-size: 26rpx;}
	.search-hot-head{}
	.search-hot-item{display: flex; align-items: center; margin: 36rpx 0 50rpx;}
	.search-hot-top{color: #fb2222; width: 60rpx; margin-left: 8rpx;}
	.search-hot-word{flex: 1;}
	.search-hot-word view:nth-child(1){font-size: 30rpx; color: black;}
	.search-hot-word view:nth-child(2){width: 100%; font-size: 24rpx; color: #878787;}

	.search-hot-word image{ width: 48rpx; height: 22rpx;}
	.search-hot-count{ color: #878787;}
	.search-result{ border-top: 2rpx #e4e4e4 solid;  padding: 30rpx;}
	.search-result-item{display: flex; justify-content: space-between; align-items: center; padding-bottom: 30rpx; margin-bottom: 30rpx;  border-bottom: 2rpx #e4e4e4 solid;}
	.search-result-word{}
	.search-result-word view:nth-child(1){font-size: 28rpx; color: #235790; margin-bottom: 12rpx;}
	.search-result-word view:nth-child(2){font-size: 22rpx; color: #898989;}
	.search-result-word text{font-size: 50rpx;}
	.search-suggets{border-top: 2rpx solid #e4e4e4; padding: 30rpx; font-size: 26rpx;}
	.search-suggets-head{color: #4574a5;margin-bottom: 74rpx;}
	.search-suggets-item{color: #5d5d5d;margin-bottom: 74rpx;}
	.search-suggets-item text{color: #bdbdbd; margin-right: 28rpx; position: relative; top: 2rpx;}
	
</style>